<template>
    <div class="followListDetail">
        <div class="folloeLstReturn">
            <van-nav-bar title="关注" left-arrow @click-left="onClickLeft">
                <template #left>
                    <div class="icon">
                        <img class="auto-img" src="../../public/images/songList/向左.png" alt="">
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="followListType">
            <van-tabs v-model="active" title-inactive-color="#fff" title-active-color="#50E3DF" background="#160742">
                <div v-if="allFollowList.length <= 0">
                    <van-tab title="全部" v-for="(item, index) in allFollowList" :key="index">未关注</van-tab>
                    <van-tab title="用户">未关注</van-tab>
                    <van-tab title="歌手">未关注</van-tab>
                    <van-tab title="用户">未关注</van-tab>
                </div>
                <div v-else>
                    <div></div>
                    <van-tab  title="歌手">
                        <div v-for="(item, index) in itemFollowList" :key="index">
                            <followList :flloe-list-data="item"></followList>
                        </div>
                    </van-tab>
                    <van-tab  title="用户">
                        <div v-for="(item, index) in itemFollowList" :key="index">
                            <followList :flloe-list-data="item"></followList>
                        </div>
                    </van-tab>
                    <van-tab  title="小组">
                        <div v-for="(item, index) in itemFollowList" :key="index">
                            <followList :flloe-list-data="item"></followList>
                        </div>
                    </van-tab>
                    <van-tab  title="话题">
                        <div v-for="(item, index) in itemFollowList" :key="index">
                            <followList :flloe-list-data="item"></followList>
                        </div>
                    </van-tab>
                    
                </div>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import followList from "@/components/followList.vue"
export default {
    name: "FollowListDetail",
    data() {
        return {
            active: 0,
            uid: "",
            allFollowList: "",

            titleData: [
                {
                    title: "歌手"
                },
                {
                    title: '用户'
                },
                {
                    title: "小组"
                },
                {
                    title: "话题"
                }
            ]
        };
    },
    components: {
        followList
    },
    created() {
        this.uid = this.$route.params.uid
         
        this.getFollowListDetail()
    },
    computed: {
        itemFollowList(){
            if(this.active === 0){
                return this.allFollowList.filter(item=>{
                    return item.userType === 2 || item.userType === 4
                })
            }else if(this.active === 1){
                return this.allFollowList.filter(item=>{

                    return item.userType === 207 || item.userType === 10 || item.userType === 0
                })
            }else if(this.active === 2){
                return this.allFollowList.filter(item=>{
                    return item.userType === 11
                })
            }
            else if(this.active === 3){
                return this.allFollowList.filter(item=>{
                    return item.userType === 3
                })
            }
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        getFollowListDetail() {
            
        }
    }
}
</script>

<style lang="less" scoped>
.followListDetail {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #160742;

    .folloeLstReturn {

        .icon {
            width: 25px;
            height: 25px;
        }

        .van-nav-bar {
            background-color: transparent;

        }

        /deep/.van-nav-bar__title {
            color: #fff;
        }

        [class*=van-hairline]::after {
            display: none;
        }

    }

    .followListType {
        /deep/.van-tabs__line {
            background-color: #50E3DF;
        }

        /deep/.van-tabs__content {
            color: #fff;
        }
    }

}
</style>